import React, { useEffect, useRef } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import diagram from './resources/diagram.bpmn';
import snippets from './snippets';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';

// CSS imports
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-js/dist/assets/bpmn-js.css';
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
import './style.css';

const BPMNDiagram = () => {
  const modelerRef = useRef(null);
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      const modeler = new BpmnModeler({
        container: containerRef.current,
      });

      modelerRef.current = modeler;

      openDiagram(diagram);

      setUpSnippets(snippets);
    }

    // Register and initialize highlight.js for code highlighting
    hljs.registerLanguage('javascript', javascript);
    hljs.initHighlightingOnLoad();
  }, []);

  async function openDiagram(xml) {
    try {
      await modelerRef.current.importXML(xml);
      modelerRef.current.get('canvas').zoom('fit-viewport');
    } catch (err) {
      console.log(err);
    }
  }

  function formatSnippetCode(snippetCode) {
    // Similar implementation as provided
  }

  function loadSnippet(fn, diagram) {
    // Similar implementation as provided, adjusted for React
  }

  function setUpSnippets(snippets) {
    // Similar implementation as provided, adjusted for React
  }

  return (
    <div>
      <div ref={containerRef} className="modeler"></div>
      <div className="snippets__list">
        {/* Snippets list will be dynamically populated */}
      </div>
      <pre className="snippet__code">
        {/* Code block for displaying the selected snippet */}
      </pre>
    </div>
  );
};

export default BPMNDiagram;